<template>
  <div class="storage-box">
    <a-card class="box-content">
      <a-space class="conditionSearch">
        <label for="inputedBox">箱子编号:</label>
        <a-input v-model:value="inputedBox" id="inputedBox" placeholder="箱子编号" />
        <a-button type="primary" @click="searchBtn">查询</a-button>
        <a-button @click="resetBtn">重置</a-button>
      </a-space>
      <a-tabs class="tabs" type="card" v-model:activeKey="activeKey" @change="tabsChange">
        <a-tab-pane key="0" tab="使用中">
          <ele-pro-table ref="table" row-key="id" :selection="selection" @update:selection="onSelectChange" :datasource="tableSource" :columns="columns" :loading="loading">
            <template #toolbar>
              <a-space>
                <a-button type="primary" @click="openAdd()">
                  <template #icon>
                    <PlusOutlined />
                  </template>
                  新建
                </a-button>
                <a-button type="primary">修改</a-button>

                <a-button type="primary" @click="printCode()">打印</a-button>
                <a-button @click="openImport()">导入</a-button>
                <a-button>箱子上架</a-button>
              </a-space>
            </template>
            <template #is_open="{text}">
              {{ text ? '是' : '否' }}
            </template>
            <template #rate_count="{text}">
              {{ text + '%' }}
            </template>
            <template #tags="{text}">
              <div v-for="(item, index) in text" :key="index">
                <a-tag color="geekblue">
                  {{ item.label_name }}
                </a-tag>
              </div>
            </template>
            <!-- 操作 -->
            <template #operation="{record}">
              <span><a style="color: #1890FF;" @click="openAdd(record)">修改</a>&nbsp;</span>
              <span><a style="color: red" @click="delRow(record)">删除</a>&nbsp;</span>
            </template>
          </ele-pro-table>
        </a-tab-pane>
        <a-tab-pane key="1" tab="闲置">
          <ele-pro-table :selection="selection" row-key="id" @update:selection="onSelectChange" :datasource="tableSource" :columns="columns" :loading="loading">
            <template #toolbar>
              <a-space>
                <a-button type="primary" @click="openAdd()">
                  <template #icon>
                    <PlusOutlined />
                  </template>
                  新建
                </a-button>
                <a-button type="primary">修改</a-button>
                <a-button type="primary" danger @click="xzRemoves">
                  <template #icon>
                    <DeleteOutlined />
                  </template>
                  删除
                </a-button>
                <a-button type="primary" @click="printCode()">打印</a-button>
                <a-button @click="openImport()">导入</a-button>
                <a-button>箱子上架</a-button>
                <a-button type="primary" @click="resetBox()">
                  <template #icon><ReloadOutlined /></template>
                  重置闲置
                </a-button>
              </a-space>
            </template>
            <template #is_open="{text}">
              {{ text ? '是' : '否' }}
            </template>
            <template #rate_count="{text}">
              {{ text + '%' }}
            </template>
            <template #tags="{text}">
              <div v-for="(item, index) in text" :key="index">
                <a-tag color="geekblue">
                  {{ item.label_name }}
                </a-tag>
              </div>
            </template>
            <!-- 操作 -->
            <template #operation="{record}">
              <span><a style="color: #1890FF;" @click="openAdd(record)">修改</a>&nbsp;</span>
              <span><a style="color: red" @click="delRow(record)">删除</a>&nbsp;</span>
            </template>
          </ele-pro-table>
        </a-tab-pane>
      </a-tabs>
    </a-card>
  </div>

  <!-- 编辑弹窗 -->
  <box-add v-model:visible="showEdit" :data="current" @done="reload" />
  <box-import v-model:visible="showImport" :data="current" @done="reload" />
</template>

<script>
import { PlusOutlined, DeleteOutlined, ReloadOutlined, ExclamationCircleOutlined } from '@ant-design/icons-vue'

import BoxAdd from './box-add'
import BoxImport from './box-import'
import { createVNode } from 'vue'
export default {
  components: {
    PlusOutlined,
    DeleteOutlined,
    ReloadOutlined,
    BoxAdd,
    BoxImport
  },
  data() {
    return {
      // 数据状态
      loading: false,
      // 被选中的数据--使用中
      selection: [],
      // 选中行-id数组
      selectedRowKeys: [],
      // 选中行-code数组
      selectedRowCodes: [],
      // 选中行-对象数组
      selectedRows: [],
      inputedBox: null,
      // 弹窗添加数据
      current: null,
      // 是否显示编辑弹窗
      showEdit: false,
      showImport: false,
      activeKey: '0',
      tableSource: [],
      columns: [
        {
          title: '编号',
          dataIndex: 'id'
        },
        {
          title: '箱子编号',
          dataIndex: 'box_code'
        },
        {
          title: '货架编号',
          dataIndex: 'shelf_code'
        },
        {
          title: '箱子型号',
          dataIndex: 'rule.title'
        },
        {
          title: '是否开封',
          dataIndex: 'is_open',
          slots: { customRender: 'is_open' }
        },
        {
          title: '创建日期',
          dataIndex: 'create_time'
        },
        {
          title: '更新日期',
          dataIndex: 'update_time'
        },
        {
          title: '种类/数',
          dataIndex: 'kind_count',
          slots: { customRender: 'kind_count' }
        },
        {
          title: '数量',
          dataIndex: 'number_count',
          slots: { customRender: 'number_count' }
        },
        {
          title: '占有率',
          dataIndex: 'rate_count',
          slots: { customRender: 'rate_count' }
        },
        {
          title: '仓库标签',
          dataIndex: 'tags_data',
          slots: { customRender: 'tags' }
        },
        {
          title: '操作',
          slots: { customRender: 'operation' }
        }
      ]
    }
  },
  methods: {
    // 表格多选的监听
    onSelectChange(selection) {
      this.selection.value = selection
    },
    // 搜索内容
    searchBtn() {
      var data = { is_idle: this.activeKey, box_code: this.inputedBox }
      this.getTable(data)
    },
    // tabs切换
    tabsChange(activeIndex) {
      // 当前tab
      this.activeKey = activeIndex
      console.log(123)
      console.log(this.selection)
      // 重新请求列表数据
      var data = { is_idle: activeIndex }
      this.getTable(data)

      // 重置多选择框
      this.clearSelect()
    },
    // 清空select
    clearSelect() {
      this.selection = []
    },
    // 打开编辑弹窗
    openAdd(record) {
      this.current = record ? record : []
      this.showEdit = true
    },
    // 打开导入弹窗
    openImport() {
      this.current = []
      this.showImport = true
    },
    // 重置搜索
    resetBtn() {
      this.inputedBox = null
    },
    getBoxInfo(id) {
      const hide = this.$message.loading('请求中..', 0)
      this.$http({ url: '/depot/box/' + id, method: 'get' })
        .then(res => {
          hide()
          if (res.data.code === 0) {
            this.current = res.data.data
            return res.data.data
          } else {
            this.$message.error(res.data.msg)
            return false
          }
        })
        .catch(e => {
          hide()
          this.$message.error(e.message)
        })
    },
    async getTable(params) {
      const hide = this.$message.loading('请求中..', 0)
      this.loading = true
      this.$http({
        url: '/depot/box',
        method: 'get',
        params: params
      })
        .then(result => {
          hide()
          this.tableSource = result.data.data.list
          this.loading = false
        })
        .catch(e => {
          hide()
          this.$message.error(e.message)
        })
    },
    // 重置闲置箱子
    resetBox() {
      var content = this.selectedRowKeys.length ? '确定要重置选中的箱子吗？' : '确定要重置所有闲置的箱子吗？'
      this.$confirm({
        title: '提示',
        content: content,
        icon: createVNode(ExclamationCircleOutlined),
        maskClosable: true,
        onOk: () => {
          const hide = this.$message.loading('请求中..', 0)
          this.$http
            .post('/depot/box/recover', { id: this.selectedRowKeys })
            .then(res => {
              hide()
              if (res.data.code === 0) {
                this.$message.success(res.data.msg)
                // 刷新列表数据
                this.getTable({ is_idle: this.activeKey })
                // 清空选择
                this.selection = []
              } else {
                this.$message.error(res.data.msg)
              }
            })
            .catch(e => {
              hide()
              this.$message.error(e.message)
            })
        }
      })
    },
    // 打印编号
    printCode() {
      if (this.selection.value.length <= 0) {
        this.$message.error('打印内容不能为空')
        return
      }
      const hide = this.$message.loading('请求中..', 0)
      this.$http({
        url: '/common/bar_code',
        method: 'post',
        responseType: 'blob',
        params: {
          bar_code: this.selection.value
        }
      })
        .then(res => {
          hide()
          //请求成功，在线预览
          const blob = new Blob([res.data], {
            type: 'application/pdf;charset=utf-8'
          })
          // 记得一定要设置application的类型
          let fileURL = window.URL.createObjectURL(blob)
          window.open(fileURL, '_blank')
          this.clearSelect()
        })
        .catch(e => {
          hide()
          console.log(e)
        })
    },
    // 删除箱子
    delRow(record) {
      const hide = this.$message.loading('请求中..', 0)
      this.$http({
        url: '/depot/box/' + record.id,
        method: 'delete'
      })
        .then(res => {
          hide()
          if (res.data.code === 0) {
            this.$message.success(res.data.msg)
          } else {
            this.$message.error(res.data.msg)
          }
        })
        .catch(error => {
          hide()
          this.$message.error(error.message)
        })
    },
    async xzRemoves() {
      const hide = this.$message.loading('请求中..', 0)
      let arr = []
      this.selection.value.forEach(item => {
        arr.push(item.id)
      })
      this.$http({
        url: '/depot/box/delete',
        method: 'delete',
        data: {
          id: arr
        }
      })
        .then(res => {
          hide()
          if (res.data.code === 0) {
            this.$message.success(res.data.msg)
            this.getTable()
          } else {
            this.$message.error(res.data.msg)
          }
        })
        .catch(error => {
          hide()
          this.$message.error(error.message)
        })
    }
  },
  created() {
    this.getTable()
  }
}
</script>

<style scoped>
.storage-box {
  width: 100%;
  height: 100%;
}
.storage-box .box-content {
  width: 98%;
  margin: 1%;
}
.storage-box .box-content .tabs {
  margin-top: 2%;
}
</style>
